<template>
    <div id="app">
        <el-card>
            <!-- 表格区域 -->
            <div id="list">
                <el-table border stripe :header-cell-style="tableHeaderCellStyle" :cell-style="tableCellStyle"
                    tooltip-effect="dark"
                    :data="$store.state.showList.slice((currentPage - 1) * $store.state.page.pageSize, currentPage * $store.state.page.pageSize)">

                    <el-table-column :label="item.propName" :property="item.prop"
                        v-for="item in $store.state.tableColumnList" :key="item.prop" align="center"
                        :formatter="formatBoolean">
                    </el-table-column>

                    <el-table-column prop="operate" label="操作" align="center">
                        <template v-slot="scope">
                            <el-button size="small" icon="el-icon-s-tools" id="modify" circle
                                :disabled="!$store.state.isModify" @click="$store.commit('edit_Modify', scope.row)">
                            </el-button>
                            <el-button type="danger" size="small" icon="el-icon-delete" circle
                                :disabled="!$store.state.isDelete" @click="$store.commit('edit_Delete', scope.row)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分页页码 -->
        <div id="page_box">
            <el-pagination :current-page="currentPage" @current-change="handleCurrentChange"
                layout="total, prev, pager, next, jumper" :total="$store.state.page.total"
                :page-size="$store.state.page.pageSize" background hide-on-single-page>
            </el-pagination>
        </div>


    </div>
</template>

<script src="../assets/js/components/list.js">
</script>

<style scoped src="../assets/css/components/list.css">
</style>